<template>
    <div id="box">
        <!-- 顶部导航栏 -->
        <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="$router.back()" fixed />

        <!-- 下拉刷新组件 -->
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <!-- 上拉加载列表组件 -->
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <!-- 列表项 - 每个商品 -->
                <van-cell v-for="good in goodsDatas" :key="good.id" @click="$router.push(`/detail?id=${good.id}`)">
                    <!-- 商品卡片 -->
                    <van-card :price="good.sell_price" :desc="good.zhaiyao" :title="good.title" :lazy-load="true"
                        :thumb="good.img_url" />
                </van-cell>

                <!-- 返回顶部按钮 -->
                <van-back-top />
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script setup>
// 导入Vue的ref函数
import { ref } from 'vue'
// 导入获取商品数据的API函数
import { getGoodsDatas } from '../api/list.js'

// 定义响应式变量
const goodsDatas = ref([]) // 存储商品数据列表
const loading = ref(false) // 是否正在加载中
const finished = ref(false) // 是否已加载完所有数据
const refreshing = ref(false) // 是否正在下拉刷新
let page = ref(1) // 当前页码
const limit = ref(5) // 每页数据条数

// 获取商品数据的函数
const _getGoodsDatas = async () => {
    loading.value = true // 开始加载，显示加载状态
    let data = await getGoodsDatas(page.value, limit.value) // 调用API获取数据

    // 判断数据是否已全部加载完毕
    if (data.message.length < limit.value) {
        // 如果返回的数据少于每页限制数量，说明没有更多数据了
        finished.value = true
    }
    // 还有更多数据，将新数据追加到现有数据中
    goodsDatas.value = [...goodsDatas.value, ...data.message]
    loading.value = false // 加载完成
    refreshing.value = false // 刷新完成
    page.value++ // 页码增加，准备加载下一页
}

// 上拉加载更多数据的回调函数
const onLoad = () => {
    _getGoodsDatas() // 调用获取数据函数
}

// 下拉刷新的回调函数
const onRefresh = () => {
    page.value = 1 // 重置页码为1
    if (refreshing.value) {
        finished.value = false // 重置完成状态
        goodsDatas.value = [] // 清空现有数据
    }
    onLoad() // 重新加载数据
}
</script>